<!--背诵弹出框 大框遮住背面答案-->
  
  <div class="modal fade" id="myLgModal_beisong">
    <div class="modal-dialog modal-fullscreen">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">关闭</span></button>
          <h4 class="modal-title">标题</h4>
        </div>
        <div class="modal-body">
          <div class="row">
            <div class="col-xs-8">
          	  <p id="reply"></p>
              <p id="radioGroup"></p>
              <p>
                <button class="btn"><i class="icon icon-undo"></i></button>
                <button class="btn"><i class="icon icon-forward"></i></button>
              </p>
              <p>
                  <span class="label label-danger">错误：</span>
                  <span id="errorList"></span>
              </p>
              <p>
                  <span class="label label-warning">得分：</span>
                  <span id="score"></span>
              </p>
            </div>
            <div class="col-xs-4">
                <p>
                  <button type="button" class="btn" data-toggle="collapse" data-target="#alert">答案提示！</button>
                </p>
            	<div class="collapse" id="alert">
                  <div class="bg-primary with-padding">
                    <p id="alert_txt"></p>
                  </div>
                </div>  
            </div>
            </div>
        </div>
        
      </div>
    </div>
  </div>
<footer class="footer">
        <div class="container">
            
                <p  style="border-left: 1px #ABA6A6 solid;padding-left: 35px;">
                    <dl>
                      <dt><i class="icon icon-stack"></i> 古诗词网，古诗词、古籍文章大全！</dt>
                      <dd><a href="<{spUrl c=main a=gushi}>">古诗</a>|
                           <a href="<{spUrl c=main a=chengyu}>">成语</a>
                           |<a href="<{spUrl c=main a=book}>">古籍</a>|
                           <a href="<{spUrl c=main a=author}>l">作者</a>
                           </dd>
                    </dl>
                </p>
             
          	 
                <p style="border-left: 1px #ABA6A6 solid;padding-left: 35px;">
                      <dl>
                      <dt><i class="icon icon-star"></i> 投诉建议</dt>
                      <dd>通过E-mail将您的想法和建议发给我们</dd>
                      <dd>稿件投诉：1121624294@qq.com</dd>
                      <dd>版权建议：1121624294@qq.com</dd>
                    </dl>
                </p>
             
          	 
                <p style="border-left: 1px #ABA6A6 solid;padding-left: 35px;">
                    <dl>
                      <dt><i class="icon icon-envelope-alt"></i> 联系我们</dt>
                      <dd>古诗词网客服QQ：1121624294</dd>
                      <dd>备案号：<a rel="nofollow" href="http://www.beian.miit.gov.cn" target="_blank">京ICP备16009769号</a></dd>
                    </dl>
                </p>
          	 
            </div>          
            <p style="border-left: 1px #ABA6A6 solid;padding-left: 35px;">© 2013-2018 指动学堂-版权所有</p>
            
            <!--<ul class="footer-links">
                <li><a href="<{spUrl c=about a=yhxz}>">用户须知</a></li>
                <li class="muted">·</li>
                <li><a href="<{spUrl c=about a=yhxy}>">用户协议</a></li>
                <li class="muted">·</li>
                <li><a href="<{spUrl c=about a=bqsm}>">版权声明</a></li>
                <li class="muted">·</li>
                <li><a href="<{spUrl c=about a=schz}>">市场合作</a></li>
                <li class="muted">·</li>
                <li><a href="<{spUrl c=about a=ysbh}>">隐私保护</a></li>
                <li class="muted">·</li>
                <li><a href="<{spUrl c=program a=sitemap}>">网站地图</a></li>
            </ul>-->
        </div>
        <audio id="media" src="" style="display:none;"></audio>
        <input type="hidden" name="errorStr" id="errorStr" value="[]" />
        <input type="hidden" name="crrectStr" id="crrectStr" value="" /> 
        <input type="hidden" name="replyStr" id="replyStr" value="" />
        <input type="hidden" name="errorNum" id="errorNum" value="0" />
    </footer>
  <!-- ZUI Javascript 依赖 jQuery -->
  <script src="tpl/web/js/jquery.js"></script>
  <!-- ZUI 标准版压缩后的 JavaScript 文件 -->
  <script src="tpl/web/js/zui.min.js"></script>
  <script type="text/javascript">    
    //回答错误列表
    var errorStr=[];
    var media = $('#media');
    var audioTimer = null;
 
    //绑定播放暂停控制
    $('.icon-volume-up').bind('click', function() {
      	$('#media').attr('src',$(this).attr('data-src'));
        playAudio();
    }); 

    //播放暂停切换
    function playAudio() {
        if($('#media').paused) {
            play();
        } else {
            pause();
        }
    }

    //播放
    function play() {
        $('#media').play();
    }

    //暂停
    function pause() {
        $('#media').pause();
    }
    function entityToString(str) {
        var s = "";
        if (str.length == 0) return "";
        s = str.replace(/<br>/g, "");
        s = s.replace(/<\/br>/g, "");
        s = s.replace(/<p>/g, "");
        s = s.replace(/<\/p>/g, "");
        s = s.replace(/<\/?.+?>/g, "");
        s = s.replace(/ /g, "");
        return s;
      }
    function getSelectChar(content){        
        var strCon = content
        strCon = entityToString(strCon);
        strCon = strCon.replace(/\s*/g, "");
        strCon = strCon.replace(/[\r\n]/g, "");
        var start = 0;
        var selectStr = $('#replyStr').val();
        selectStr = entityToString(selectStr);
        selectStr = selectStr.replace(/\s*/g, "");
        selectStr = selectStr.replace(/[\r\n]/g, "");
        if (selectStr != ''){
          start = strCon.indexOf(selectStr) + selectStr.length;
          //console.log('开始索引：' + start)
        }        
        var end = strCon.length - selectStr.length;
        //console.log('结束索引：' + end)
        //截取剩余内容
        var lastStr = strCon.substring(start);
        //console.log('剩余字符串：'+lastStr)
        //从剩余的内容中取出第一个作为正确答案    
        var correct = lastStr.substring(0,1);
        if(correct == ''){
          	//alert('空格：'+lastStr);
        	correct = lastStr.substring(1,1);
        }
        $('#alert_txt').html(correct);
        $('#crrectStr').val(correct);
        //correctStr=correct 
        var n = {name:correct,value:correct}
        var jsonRadio = []
        jsonRadio.push(n);
        //再随机从整个字符串中取出3个备选答案
        for(var i=0;i<3;i++){
          var rand = Math.floor(Math.random() * strCon.length)
          var ss = content.charAt(rand);
          //var a = Math.ceil(Math.random() * 3);
          jsonRadio.push({ name: ss, value: ss })
        }
        jsonRadio.sort(function () { return 0.5 - Math.random() })    
        return jsonRadio;
    }
    function beisong(id){
      	//清空所有内容
        var content = $('#con_'+id).val();
        var jsonArr = getSelectChar(content);
        var html = '';
        for(var i=0;i<jsonArr.length;i++){
            var _item = jsonArr[i];
            html += '<label class="radio-inline">'+
                      '<input type="radio" name="rochar" onclick="onSelect('+id+')" value="'+_item.value+'"> '+_item.name+''+
                    '</label>';
            
        }
        $('#radioGroup').html(html);
        $('.modal-title').html('背诵古诗，努力哦！');
        $('#myLgModal_beisong').modal();
    }
    function onSelect(id){
        //用户选择的答案
        var rochar = $('input:radio[name=rochar]:checked').val();
        //全部字符串
        var content = $('#con_'+id).val();
        content = entityToString(content);
        content = content.replace(/\s*/g, "");
        content = content.replace(/[\r\n]/g, "");
        //正确答案 
        var correctStr = $('#crrectStr').val();
        correctStr = entityToString(correctStr);
        correctStr = correctStr.replace(/\s*/g, "");
        correctStr = correctStr.replace(/[\r\n]/g, "");
        if(rochar == correctStr){
                //选择正确 将正确答案添加到已选择的正确答案字符串
                var selectStr = $('#replyStr').val();
                if(selectStr == 'undefined'){
                    selectStr = '';
                }
                var replyStr = selectStr + rochar;
                $('#replyStr').val(replyStr);
                $('#reply').html(replyStr);           
            }else{
                //选择错误
                var selectStr = $('#replyStr').val();
                var replyStr = selectStr + '<font color="red">'+rochar+'</font>';
                $('#replyStr').val(replyStr);
                var errorList = $('#errorStr').val();
                errorList = JSON.parse(errorList);
                errorList.push({ c: correctStr, e: rochar });
                $('#errorStr').val(JSON.stringify(errorList));
                var errorNum = $('#errorNum').val()/1+1;
                $('#errorNum').val(errorNum);
                var errorH = '';
                for(var i=0;i<errorList.length;i++){
                    var _item = errorList[i];
                    errorH += _item.c+'->'+_item.e+'; ';
                }
                $('#errorList').html(errorH);
                errorH = '';
                $('#reply').html(replyStr);
            }
            var allReplay = $('#replyStr').val();
            allReplay = entityToString(allReplay);
        	allReplay = allReplay.replace(/\s*/g, "");
        	allReplay = allReplay.replace(/[\r\n]/g, "");
            //判断是否完成背诵
            if(allReplay.length == content.length){
              	//alert('完成');
                //完成 计算得分
                var a = $('#errorNum').val();
                var b = content.length;
                var c = b/1-a/1;
                var _score = Math.ceil((c * 100) /b );
                $('#score').html("背诵已经完成，您的得分："+_score);
            }else{
				beisong(id);
            }
    }
    function xihuan(tbt,id,obj){
        var key = "num";
        if(tbt == "gs"){
            key = "gushi_"+key+"_"+id;
        }else if(tbt == "gj"){
            key = "guji_"+key+"_"+id;
        }else if(tbt == "cy"){
            key = "chengyu_"+key+"_"+id;
        }else if(tbt == "zz"){
            key = "zuoze_"+key+"_"+id;
        }
        $.get("/index.php?c=main&a=counter&k="+key, function(result){
            var numJson = JSON.parse(result);
            if(numJson.code/1 == 0){
                var num = numJson.num;
                $(obj).find('i').removeClass('icon-heart-empty');
                $(obj).find('i').addClass('icon-heart');
                $(obj).attr("disabled","disabled");
                new $.zui.Messager('+1', {
                    icon: 'heart',
                    time:2000,
                    type: 'danger', // 定义颜色主题
                    placement: 'center' // 定义显示位置
                }).show();
            }        
        });
            
    }
    function wechat(tbt,id,obj){
        $('#collapseWechat_'+id).collapse('toggle');
        var url = "";
        if(tbt == "gs"){
            url = "index.php?c=main&a=gsDetails&id="+id;
        }else if(tbt == "gj"){
            url = "index.php?c=main&a=gjDetails&id="+id;
        }else if(tbt == "cy"){
            //
        }else if(tbt == "zz"){
            url = "index.php?c=main&a=zzDetails&id="+id;
        }
        url = encodeURIComponent("http://gushi.phoenixfm.cn/"+url);
        $('#imgqcode_'+id).attr('src','https://sapi.k780.com/?app=qr.get&data='+url);
    }
  </script>
  <script>
(function(){
    var bp = document.createElement('script');
    var curProtocol = window.location.protocol.split(':')[0];
    if (curProtocol === 'https') {
        bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
    }
    else {
        bp.src = 'http://push.zhanzhang.baidu.com/push.js';
    }
    var s = document.getElementsByTagName("script")[0];
    s.parentNode.insertBefore(bp, s);
})();
</script>
</body>
</html>